<template>
  <div class="cart">
    <my-header>
      <template #left>
        <span style="color: red" @click="isEit=!isEit"> {{isEit?'编辑':'完成'}} </span>
      </template>
      <template #center> 购物车 </template>
    </my-header>
    <div class="content">
      <img
        v-if="!token || cartList.length == 0"
        src="../../assets/img/dp.png"
        alt=""
      />
      <ul v-else>
        <li v-for="(item, index) in cartList" :key="index">
          <van-swipe-cell>
            <van-checkbox
              v-model="item.check"
              checked-color="#ee0a24"
              @change="checkOne"
            ></van-checkbox>
            <van-card :thumb="item.img">
              <template #tags>
                <h5>{{ item.name }}</h5>
                <p>{{ item.ties }}</p>
                <section>
                  <span style="color: red">￥{{ item.price }}</span>
                  <van-stepper v-model="item.buyNum" />
                </section>
              </template>
            </van-card>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="$store.commit('delect',index)"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
      <my-like></my-like>
    </div>
    <van-submit-bar :price="allPrice" :button-text="isEit?'提交订单':'删除'" @submit="onSubmit">
      <van-checkbox checked-color="#ee0a24" v-model="checked" @click="$store.commit('allCheck',checked)">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import myHeader from "../../components/myHeader.vue";
import MyLike from "../../components/myLike.vue";
import { useStore } from "vuex";
import { useRouter } from 'vue-router';
export default {
  components: { myHeader, MyLike },
  setup() {
    const { state,commit } = useStore();
    const { push } = useRouter();
    // const store = useStore();
    // console.log(store);
    let token = localStorage.getItem("token");
    const data = reactive({
      cartList: computed(() => state.cartList),
      checked: state.cartList.length?state.cartList.every(item => item.check):false,
      isEit: true,
      allPrice: computed(() => {
        let price = 0;
        state.cartList.forEach(item => {
          if (item.check){
            price+=item.price*item.buyNum
          }
        })
        return price*100
      })
    });

    const checkOne = () => { // 反选的事件
       data.checked = data.cartList.every(item => item.check);
       commit('kong');
    }
    const onSubmit = () => { // 提交订单的事件
        let token = localStorage.getItem('token');
        let bool = data.cartList.some(item => item.check);
        // some 数组的方法，只要有一个符合条件，就返回 true
        if (!bool){
          alert('请选择数据！')
          return;
        }
        if (data.isEit) {
          if (token){
            commit('addOrder');
            push('/order');
          } else {
            push('/login');
          }
          return;
        };
        commit('remove');
        data.checked = false;
    }
    return {
      ...toRefs(data),
      token,
      onSubmit,
      checkOne
    };
  },
};
</script>
<style lang="scss" scoped>
.cart {
  img {
    width: 100%;
  }
  .content {
    height: calc(100% - 50px);
    overflow: auto;
  }
  // /deep/ vue2 的写法
  // :deep() 是vue3 的写法
  :deep(.van-swipe-cell__wrapper) {
    display: flex;
    background: #fff;
    padding: 0 10px;
    .van-card {
      flex: 1;
      background: #fff;
      h5 {
        margin-top: 10px;
      }
      p {
        margin: 20px 0;
        color: #b2b2b2;
      }
      .van-stepper {
        float: right;
      }
    }
    .van-button {
      height: 100%;
    }
  }
  .van-submit-bar{
    bottom: 50px;
  }
}
</style>